<link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../lib/overlayscrollbars/styles/overlayscrollbars.min.css">
<link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" integrity="sha512-mSYUmpwHo3XxZsBjYWBL+Euze+kL8b6mqJRY2t4zmGpOKfRiY1tWBDVBPvb0aowzekoKHBHQqz1XJANtbNNWkNmg4A==" crossorigin="anonymous" referrerpolicy="no-referrer" /><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-10 pt-2">
    <!--            这里显示商品列表-->
    <!--            themlyme模板显示-->
    <div class="row text-center">
        <div class="col-9"></div>
        <div class="col-3">
            <a data-toggle="modal" data-target="#modalAdd" class="btn btn-warning">新增</a>
        </div>
    </div>
    <table class="table table-bordered">
        <thead>
        <th>序号</th>
        <th>书名</th>
        <th>借阅时间</th>
        <th>状态</th>
        <th>归还时间</th>
        </thead>
        <tr th:each="borrow:${data}">
            <td th:text="${borrow.getId()}"></td>
            <td th:text="${borrow.bookname}"></td>
            <td th:text="${borrow.getBorrow_time()}"></td>
            <td th:text="${borrow.getBorrow_state()}"></td>
            <td th:text="${borrow.getBack_time()}"></td>
            <td>
                <button class="btn btn-danger" th:onclick="del([[${borrow.getId()}]])">删除</button>
                <button data-toggle="modal" data-target="#modalUpdate" class="btn btn-info"
                        th:onclick="update([[${borrow.getId()}]],[[${borrow.bookname}]],
                                [[${borrow.getBorrow_time()}]],[[${borrow.getBorrow_state()}]],[[${borrow.getBack_time()}]])">更新</button>
            </td>
        </tr>
    </table>
</div>
<!--    模态框测试-->
<!-- 定义一个新增的子窗体模态框（Modal）HTML代码 -->
<div class="modal fade" id="modalAdd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 80%;">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h4 class="modal-title text-center" id="myModalLabel">添加图书</h4>
            </div>
            <div class="modal-body p-4">
                <!-- 新增表单区 -->
                <form action="/borrow/borrowAddProcess" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="bookname" class="text-muted">书名</label>
                            <input type="text" name="bookname" id="" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="borrow_time" class="text-muted">借阅时间</label>
                            <input type="text" name="borrow_time" id="" class="form-control mb-3 datepicker">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="borrow_state" class="text-muted">状态</label>
                            <input type="text" name="borrow_state" id="" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="back_time" class="text-muted">归还时间</label>
                            <input type="text" name="back_time" id="" class="form-control mb-3 datepicker">
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <input type="submit" value="提交" class="btn btn-success">
                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--  定义更新子窗体模态框代码区-->
<!-- 模态框（Modal） -->
<div class="modal fade" id="modalUpdate" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 80%;">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h4 class="modal-title text-center" id="myModalLabel">更新图书</h4>
            </div>
            <div class="modal-body p-4">
                <form action="/api/borrowUpdateProcess" method="post">
                    <div class="row">
                        <div class="col-md-6">
                            <label for="id" class="text-muted">序号</label>
                            <input type="text" name="id" id="Id" disabled="disabled" class="form-control mb-3">
                        </div>
                        <div class="col-md-6">
                            <label for="bookname" class="text-muted">书名</label>
                            <input type="text" name="bookname" id="bookname" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="borrow_time" class="text-muted">借阅时间</label>
                            <input type="text" name="borrow_time" id="borrow_time" class="form-control mb-3 datepicker">
                        </div>
                        <div class="col-md-6">
                            <label for="borrow_state" class="text-muted">状态</label>
                            <input type="text" name="borrow_state" id="borrow_state" class="form-control mb-3">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <label for="back_time" class="text-muted">归还时间</label>
                            <input type="text" name="back_time" id="back_time" class="form-control mb-3 datepicker">
                        </div>
                    </div>
                    <div class="text-center mt-3">
                        <button type="button" class="btn btn-info" id="btnUpdate">更新</button>
                        <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>



<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihC0XOVfDKyKbp+MqT+nAgxrbLyaQmJJvQbyUfAtkOf/LDh+bguu0+aL6ZVt4klkWITZPKpcNPAE4Bu2AQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function(){
        // 初始化整个页面上的datepicker
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true
        });

        $('#modalUpdate').on('shown.bs.modal', function () {
            // 对于modal中的datepicker重新初始化（在某些情况下可能需要）
            $('#borrow_time, #back_time, #modalAdd .datepicker').datepicker('update');
        });
</script>
<script>
    function update(id,bookname,borrow_time,borrow_state,back_time) {
        //     肯定有了这个商品的信息，包括商品的所有字段值
        console.log(id,bookname,borrow_time,borrow_state,back_time)
        //     单独去给更新代码块的表单
        $('#Id').val(id);
        $('#bookname').val(bookname);
        $('#borrow_time').val(borrow_time);
        $('#borrow_state').val(borrow_state);
        $('#back_time').val(back_time);
    }
    // 使用ajax方式提交更新处理
    $('#btnUpdate').click(function(){
        var flag=confirm("确认提交更新？");
        if(flag==true){
            $.post("/api/borrowUpdateProcess",{"id":$('#Id').val(),"bookname":$('#bookname').val(),'borrow_time':$('#borrow_time').val(),
                "borrow_state":$('#borrow_state').val(),'back_time':$('#back_time').val()},function (res){
                if (res==1){
                    alert("更新ok");
                    location.href="/borrow/borrowList";
                }else {
                    alert("更新失败");
                }
            })
        }
    })
    function del(id){
        var flag = confirm("是否删除该条记录");
        if(flag==true) {
            // 使用ajax方法传参交给后端去处理
            $.post("/api/borrowDelete", {"id": id}, function (res) {
                console.log(res)
                if (res == 1) {
                    alert("删除成功！");
                    location.reload();
                } else {
                    alert("删除失败!");
                    location.reload();
                }
            })
        }
    }
</script>